<template>
  <kb-scroll-view>
    <p>默认</p>
    <kb-input
      v-model="values.value1"
      :inputProps="{
        compName: 'passWordInput',
      }"
      :keyBoardProps="{
        compName: 'numberKeyBoard',
      }"
      @submit="submitHandler"
      @blur="blurHandler"
    />
    <div style="height: 200px"></div>
    <p>最多输入四条</p>
    <kb-input
      v-model="values.value2"
      :inputProps="{ compName: 'passWordInput', length: 4 }"
      :keyBoardProps="{ compName: 'numberKeyBoard' }"
    />
    <div style="height: 200px"></div>
    <p>格子显示</p>
    <kb-input
      v-model="values.value3"
      :inputProps="{ compName: 'passWordInput', gutter: '10px' }"
      :keyBoardProps="{ compName: 'numberKeyBoard' }"
    />
    <div style="height: 200px"></div>
    <p>显示明文</p>
    <kb-input
      v-model="values.value4"
      :inputProps="{ compName: 'passWordInput', mask: false }"
      :keyBoardProps="{ compName: 'numberKeyBoard' }"
    />
    <kb-board />
  </kb-scroll-view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        "default",
        "custom",
        "身份证",
        "title",
        "配置多个按键",
        "随机键盘",
        "双向绑定",
      ],
      showKeyboard: false,
      values: {
        value1: "1234",
        value2: "123",
        value3: "12",
        value4: "123",
      },
      currValueKey: "",
      maxLens: {
        value1: 6,
        value2: 4,
      },
    };
  },
  methods: {
    showKeyboardHandler(t, key) {
      this.showKeyboard = t;
      this.currValueKey = key;
    },
    inputHandler(str) {
      var key = this.currValueKey;
      var maxLength = this.maxLens[key] ? this.maxLens[key] : 6;
      if (this.values[key].length < maxLength) {
        this.values[key] = this.values[key] + str;
      }
    },
    deleteHandler() {
      var currValue = this.values[this.currValueKey];
      this.values[this.currValueKey] =
        currValue.length > 0
          ? String(currValue).slice(0, currValue.length - 1)
          : "";
    },
    submitHandler(value) {
      console.log("password demo:submit", value);
    },
    blurHandler(value) {
      console.log("password demo:blur", value);
    },
  },
};
</script>
<style lang="scss">
</style>